<template>
  <div class="board_sum" :class="{ 'is-bottom': emitData.isWrite == '1' }">
    <div class="board_sum_title">公务员年度考核登记表</div>
    <div class="board_sum_tips">（ {{ emitData.year }}年度 ）</div>
    <div class="board_sum_con">
      <table class="board_sum_table">
        <tr></tr>
        <tr>
          <th class="first_th">姓名</th>
          <td>{{ emitData.userName }}</td>
          <th>性别</th>
          <td>
            <p v-if="extData.userGender === '1'">男</p>
            <p v-else-if="extData.userGender === '2'">女</p>
          </td>
          <th>出生年月日</th>
          <td colspan="2">
            <p v-html="removeHtmlStyle(extData.birthday)"></p>
          </td>
        </tr>
        <tr>
          <th>政治面貌</th>
          <td colspan="3">
            <p v-html="removeHtmlStyle(extData.userFace)"></p>
          </td>
          <th>任现职时间</th>
          <td colspan="2">
            <p v-html="removeHtmlStyle(extData.workTime)"></p>
          </td>
        </tr>
        <tr>
          <th>单位及职务职级</th>
          <td colspan="6">
            <p class="pre_line" v-if="emitData.isWrite == '0'" v-html="removeHtmlStyle(extData.orgPost)"></p>
            <div v-else-if="emitData.isWrite == '1'">
              <van-field
                class="scroe_input score_base"
                v-model="extData.orgPost"
                rows="1"
                autosize
                type="textarea"
                :placeholder="'请输入'"
                maxlength="30" />
            </div>
          </td>
        </tr>
        <tr>
          <th>从事或分管工作</th>
          <td colspan="6">
            <p class="pre_line" v-if="emitData.isWrite == '0'" v-html="removeHtmlStyle(extData.engageWork)"></p>
            <div v-else-if="emitData.isWrite == '1'">
              <van-field
                class="scroe_input score_base"
                v-model="extData.engageWork"
                rows="1"
                autosize
                type="textarea"
                :placeholder="'请输入'"
                maxlength="50" />
            </div>
          </td>
        </tr>
        <tr>
          <th class="first_th">年度工作总结</th>
          <td colspan="6" class="board_td_l">
            <p class="pre_line" v-if="emitData.isWrite == '0'" v-html="removeHtmlStyle(extData.yearRecord)"></p>
            <div v-else-if="emitData.isWrite == '1'">
              <van-field
                class="scroe_input"
                v-model="extData.yearRecord"
                rows="7"
                autosize
                type="textarea"
                :placeholder="'请输入'"
                maxlength="1000" />
            </div>
          </td>
        </tr>
        <tr>
          <th class="first_th">参加脱产培训情况</th>
          <td colspan="6" class="board_td_l">
            <p class="pre_line" v-if="emitData.isWrite == '0'" v-html="removeHtmlStyle(extData.offJt)"></p>
            <div v-else-if="emitData.isWrite == '1'">
              <van-field
                class="scroe_input"
                v-model="extData.offJt"
                rows="5"
                autosize
                type="textarea"
                :placeholder="'请输入'" />
            </div>
          </td>
        </tr>

        <tr>
          <th class="board_th_color">主管领导评语和考核等次建议</th>
          <td colspan="6">
            <p class="no_data_sum"></p>
            <p class="sum_table_day">
              签名：
              <span></span>
              年
              <span></span>
              月
              <span></span>
              日
            </p>
          </td>
        </tr>
        <tr>
          <th class="board_th_color">机关负责人或考核委员会意见</th>
          <td colspan="6">
            <p class="no_data_sum"></p>
            <p class="sum_table_day">
              盖章或签名：
              <span></span>
              年
              <span></span>
              月
              <span></span>
              日
            </p>
          </td>
        </tr>
        <tr>
          <th class="board_th_color">本人意见</th>
          <td colspan="6">
            <p class="no_data_sum"></p>
            <p class="sum_table_day">
              签名：
              <span></span>
              年
              <span></span>
              月
              <span></span>
              日
            </p>
          </td>
        </tr>
        <tr>
          <th class="board_th_color">未确定等次或不参加考核情况说明</th>
          <td colspan="6">
            <p class="no_data_sum"></p>
            <p class="sum_table_day">
              盖章或签名：
              <span></span>
              年
              <span></span>
              月
              <span></span>
              日
            </p>
          </td>
        </tr>
      </table>
    </div>

    <van-popup v-model="showTime" position="bottom">
      <div class="pop_days">
        <van-datetime-picker
          v-model="currentDays"
          type="date"
          @cancel="showTime = false"
          @confirm="timeConfirm"
          :min-date="minDate" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { saveYearRecordForm } from '@api/api-documentary.js'
import BoardSound from '@com/BoardSound'
import moment from 'moment'
export default {
  components: {
    BoardSound,
  },
  props: {
    info: {
      type: Object,
      dafault() {
        return {}
      },
    },
    disabled: Boolean,
  },
  data() {
    return {
      extData: {
        userGender: '',
        birthday: '',
        userFace: '',
        workTime: '',
        orgPost: '',
        engageWork: '',
        yearRecord: '',
        offJt: '',
        isWrite: '0',
      },
      genderOptions: [
        {
          value: '1',
          text: '男',
        },
        {
          value: '2',
          text: '女',
        },
      ],
      showTime: false,
      currentDays: new Date(),
      minDate: new Date(1960, 0, 1),
      timeType: '',
      emitData: {},
    }
  },
  watch: {
    info(news) {
      this.emitData = JSON.parse(JSON.stringify(news))
      if (this.$route.query.isEnd || this.disabled) {
        this.emitData.isWrite = '0'
      } else {
        this.emitData.isWrite = '1'
      }
      this.extData = Object.assign(this.extData, this.emitData)
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.emitData = JSON.parse(JSON.stringify(this.info))
    if (this.$route.query.isEnd || this.disabled) {
      this.emitData.isWrite = '0'
    } else {
      this.emitData.isWrite = '1'
    }
    this.extData = Object.assign(this.extData, this.emitData)
  },
  methods: {
    removeHtmlStyle(html) {
      let rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    addSum(saveStatus) {
      if (saveStatus === '1') {
        if (this.extData.yearRecord.length < 100) {
          return this.$toast.fail('年度工作总结最少100个字')
        }
      }
      const data1 = {
        ...this.extData,
        saveStatus: saveStatus,
        optionUserId: localStorage.userId,
        tenantId: localStorage.tenantId,
      }
      const formData = Object.assign(JSON.parse(JSON.stringify(this.emitData)), data1)
      saveYearRecordForm({
        ...formData,
      }).then(res => {
        if (res.status === 200) {
          this.$emit('subMit', JSON.parse(JSON.stringify(formData)))
        }
      })
    },
    formatter1(value) {
      return value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
    },
    changeTime(type) {
      this.timeType = type
      let time = ''
      if (type === '0') {
        time = this.extData.birthday
      } else {
        time = this.extData.workTime
      }
      if (time.length < 5) {
        this.currentDays = moment().toDate()
      } else {
        if (time.indexOf('年') !== -1 && time.indexOf('月') !== -1 && time.indexOf('日') !== -1) {
          time = moment(time, 'YYYY年M月D日', true).format('YYYY-MM-DD')
        }
        this.currentDays = moment(time).toDate()
      }
      this.showTime = true
    },
    timeConfirm(value) {
      if (this.timeType === '0') {
        this.extData.birthday = moment(value).format('YYYY-MM-DD')
      } else {
        this.extData.workTime = moment(value).format('YYYY-MM-DD')
      }
      this.showTime = false
    },
    getTime(type, time) {
      if (time) {
        if (time.indexOf('年') !== -1 && time.indexOf('月') !== -1 && time.indexOf('日') !== -1) {
          return time
        } else {
          return moment(time).format('YYYY年MM月DD日')
        }
      } else {
        return type === '0' ? '请选择出生年月日' : '选择任现职时间'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.is-bottom {
  margin-bottom: 45px;
}
.board_sum {
  // padding: 5px;
  background-color: #fff;
  font-size: 12px;
  padding: 5px 4px;
  overflow-x: hidden;

  .board_sum_title {
    font-size: 16px;
    text-align: center;
    height: 28px;
    line-height: 28px;
  }
  .board_sum_tips {
    font-size: 12px;
    text-align: center;
    padding-bottom: 5px;
    height: 16px;
  }
  .board_sum_con {
    width: 100%;
  }
  .board_sum_table {
    width: 100%;
    border-collapse: collapse;
    color: #606266;
    table-layout: fixed;
    tr {
      border: 1px solid #b5b5b5;
      line-height: 14px;
      th {
        width: 14%;
        border: 1px solid #b5b5b5;
        font-weight: bold;
        text-align: center;
        padding: 3px 6px;
      }
      td {
        border: 1px solid #b5b5b5;
        text-align: center;
        padding: 3px 6px;
        width: 14%;
      }
      .no_data_sum {
        height: 60px;
        text-align: left;
        padding: 0 6px;
        white-space: pre-wrap;
        color: #a7a7a7;
      }
      .sum_table_day {
        text-align: right;
        padding-right: 16px;
        color: #a7a7a7;
        span {
          padding: 0 8px;
        }
        :nth-child(1) {
          padding-left: 25px;
        }
      }
      .board_td_l {
        text-align: left;
      }
      .board_th_color {
        color: #a7a7a7;
      }
      .score_base {
        font-size: 12px;
      }
      .out_td {
        & > div {
          display: flex;
          align-items: center;
        }
        .week_input {
          width: 80%;
        }
      }
      .first_th {
        width: 16%;
      }
      /deep/.van-dropdown-menu {
        .van-dropdown-menu__bar {
          background-color: transparent;
          box-shadow: none;
          .van-dropdown-menu__title {
            color: #606266;
            font-size: 12px;
          }
        }
      }
      .time-th {
        .van-cell {
          display: flex;
          align-items: center;
          .van-cell__value {
            font-size: 12px;
            color: #606266;
            line-height: 1.5;
          }
        }
      }
    }
  }
}
</style>
